<template>
    <div class="content confirm" :class='{ fade: fade }'>
        <div class="confirm-box" :class='{ fade: fade }'>
            <span class="title" :data-font="myLocale">{{ title }}</span>
            <div class="message">
                <p :data-font="myLocale">{{ message }}</p>
            </div>
            <div class="btns">
                <button class="cancel" :data-font="myLocale" v-if="!!left" @click="cancelCallback">{{ left || '取消'
                }}</button>
                <button class="confirms" :data-font="myLocale" @click="submitCallback">{{ right || '确定' }}</button>
            </div>
            <div class="del mouse-active" @click="cancelCallback"></div>
        </div>
    </div>
</template>
<script>
import { onMounted, ref, onUpdated } from 'vue'
export default {
    name: "Confirm",
    props: {
        title: {
            type: String,
            default: ''
        },
        message: {
            type: String,
            default: ''
        },
        left: {
            type: String,
            default: ''
        },
        right: {
            type: String,
            default: ''
        },
        cancelCallback: {
            type: Function,
            required: true
        },
        submitCallback: {
            type: Function,
            required: true
        }
    },
    setup() {
        const fade = ref(false)
        onUpdated(() => {
            // 模板依赖的数据发生变化时触发
        })
        onMounted(() => {
            setTimeout(() => {
                fade.value = true
            }, 0)
        })
        return { fade }
    },

    computed: {
        myLocale() {
            return localStorage.getItem('my_locale')
        }
    }

}
</script>
<style lang="less" scoped>
.content {
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 51.2rem;
    height: 100vh;
    background: rgba(197, 197, 202.0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;

    .confirm-box {
        width: 12.64rem;
        min-height: 4.71rem;
        background: #FDFDFE;
        backdrop-filter: blur(20px);
        padding: 0.37rem;
        display: flex;
        flex-direction: column;
        position: relative;

        .title {
            font-size: 0.53rem;
            font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            color: #212121;
            line-height: 0.85rem;
        }

        .title[data-font='zh'] {
            font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
        }


        .title[data-font='en'] {
            font-family: 'Helvetica';
        }

        .message {
            min-height: 2.56rem;
            margin-top: 0.43rem;

            p {
                font-weight: normal;
                color: #68656C;
            }

            p[data-font='zh'] {
                font-size: 0.53rem;
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                line-height: 0.85rem;
            }

            p[data-font='en'] {
                word-break: keep-all;
                font-size: 0.48rem;
                font-family: 'Helvetica';
                line-height: 0.75rem;
            }
        }

        .btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 100%;

            .cancel {
                width: 2.13rem;
                height: 1.07rem;
                background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
                border-radius: 0.11rem;
                border: 0.03rem solid #7709CC;
                backdrop-filter: blur(10px);
                font-size: 0.48rem;
                color: #7709CC;
                line-height: 0.69rem;
                margin-right: 0.53rem;
            }

            .cancel[data-font='zh'] {
                font-weight: normal;
                font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
            }

            .cancel[data-font='en'] {
                font-weight: 300;
                font-family: 'PingFangSC-Light, PingFang SC';
            }

            .confirms {
                width: 2.13rem;
                height: 1.07rem;
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
                border-radius: 0.11rem;
                backdrop-filter: blur(10px);
                font-size: 0.48rem;
                color: #FFFFFF;
                line-height: 0.69rem;
            }

            .confirms[data-font='zh'] {
                font-weight: normal;
                font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
            }

            .confirms[data-font='en'] {
                font-weight: 300;
                font-family: PingFangSC-Light, PingFang SC;
            }
        }

        .del {
            width: 0.85rem;
            height: 0.85rem;
            background: url(@/assets/img/confirm.png) no-repeat;
            background-size: cover;
            position: absolute;
            right: 0.37rem;
            top: 0.37rem;
        }
    }
}
</style>